<template>
  <div>
    <code>
      <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
      备注：是指进入公众号首页的广告页面
    </code>
    <el-form class="form-container" :model="postForm" v-loading="formLoading" ref="postForm" label-width="220px" label-position="right">
      <el-form-item label="开启开屏广告：">
        <el-checkbox v-model="postForm.showOpenScreenAd" :true-label=1 :false-label=0></el-checkbox>
      </el-form-item>
      <el-form-item label="开屏广告链接：">
        <el-input v-model="postForm.adLink" placeholder="请输入开屏广告链接" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="开屏广告图:(宽640*高640)：">
        <el-upload
          class="avatar-uploader"
          name="avatar"
          :action="imageUploadUrl"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="postForm.adImg" :src="postForm.adImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item v-if="permission == 3" style="padding: 10px 0">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { getOpenScreenAdSetting, saveOpenScreenAdSetting } from '@/api/systemManage'
import { shopManage_systemManage } from '@/utils/permission'
const postForm = {
  showOpenScreenAd: 0,
  adLink: null,
  adImg: null
}

export default {
  data() {
    return {
      permission: 3,
      postForm: Object.assign({}, postForm),
      imageUploadUrl: process.env.BASE_API + '/common/companies/imageUpload',
      formLoading: false,
      btnLoading: false
    }
  },
  created() {
    this.getModelPermission()
    this.initData()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_systemManage()
    },
    initData() {
      getOpenScreenAdSetting().then(res => {
        if (res.data.data) {
          this.postForm = res.data.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleAvatarSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.adImg = res.data.imageUrl
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB')
      }
      return isJPG && isLt2M
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.btnLoading = true
          this.formLoading =true
          saveOpenScreenAdSetting(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
            this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
        } else {
        	this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>

